<h1>checkbox+chips+editor+Inputtext+inputtextarea+mask+spinner+togglebutton+inputseitch+inputswitch+Radiobutton+password+tristatecheckbox</h1>

<h2>multiselect</h2>
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>
<p>Selected Cars: {{selectedCars}}</p>

<h2>checkbox</h2>
<h3 class="first">Basic</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities"></p-checkbox></div>
</div>
Selected Cities: <span *ngFor="let city of selectedCities" style="margin-right:10px">{{city}}</span>
<h3>Preselection</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-checkbox name="group2" value="Technology" label="Technology" [(ngModel)]="selectedCategories"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Finance" label="Finance" [(ngModel)]="selectedCategories"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Sports" label="Sports" [(ngModel)]="selectedCategories"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Entertainment" label="Entertainment" [(ngModel)]="selectedCategories"></p-checkbox></div>
</div>
Selected Categories: <span *ngFor="let cat of selectedCategories" style="margin-right:10px">{{cat}} </span>
<h3>Boolean - {{checked}}</h3>
<p-checkbox [(ngModel)]="checked" binary="true"></p-checkbox>

<h2>chips</h2>
<h3 class="first">Basic</h3>
<p-chips [(ngModel)]="values1" ></p-chips>
<h3>ng-template</h3>
<p-chips [(ngModel)]="values2">
    <ng-template let-item pTemplate="item">
        {{item}} - (active) <i class="fa fa-user" style="margin-right:2em"></i>
    </ng-template>
</p-chips>

<h2>editor</h2>
<h3 class="first">Default</h3>
<p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor>
<p>Value: {{text1||'empty'}}</p>
<button pButton type="button" label="Clear" icon="fa-close" (click)="text1=null"></button>
<hr style="border-top:0px;border-color:#dde3e6">
<h3>Custom Toolbar</h3>
<p-editor [(ngModel)]="text2" [style]="{'height':'320px'}">
    <p-header>
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
        </span>
    </p-header>
</p-editor>
<p>Value: {{text2||'empty'}}</p>
<button pButton type="button" label="Clear" icon="fa-close" (click)="text2=null"></button>

<h2>Inputtext</h2>
<h3 class="first">Basic</h3>
<input id="in" type="text" size="30" pInputText [(ngModel)]="text">  {{text}}
<h3>Disabled</h3>
<input id="in" type="text" size="30" pInputText [disabled]="disabled" />
<button type="button" (click)="toggleDisabled()" pButton label="Toggle"></button>

<h2>inputtextarea</h2>
<h3 class="first">Default</h3>
<textarea rows="5" cols="30" pInputTextarea></textarea>
<h3>AutoResize</h3>
<textarea rows="5" cols="30" pInputTextarea autoResize="autoResize"></textarea>

<h2>mask</h2>
<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Basic</span>
        <p-inputMask mask="99-999999" [(ngModel)]="val1" placeholder="99-999999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>SSN</span>
        <p-inputMask mask="999-99-9999" [(ngModel)]="val2" placeholder="999-99-9999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Date</span>
        <p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Phone</span>
        <p-inputMask mask="(999) 999-9999" [(ngModel)]="val4" placeholder="(999) 999-9999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Phone Ext</span>
        <p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Serial Number</span>
        <p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
    </div>
</div>

<h2>spinner</h2>
<h3 class="first">Basic</h3>
<p-spinner size="30" [(ngModel)]="val1"></p-spinner>
<h3>Min/Max</h3>
<p-spinner size="30" [(ngModel)]="val2" [min]="0" [max]="100"></p-spinner>
<h3>Step</h3>
<p-spinner size="30" [(ngModel)]="val3" [step]="0.25"></p-spinner>
<h3>Disabled</h3>
<p-spinner size="30" [(ngModel)]="val4" [disabled]="true"></p-spinner>

<h2>togglebutton</h2>
<h3 class="first">Basic - ({{checked1}})</h3>
<p-toggleButton [(ngModel)]="checked1" [style]="{'width':'150px'}"></p-toggleButton>
<h3>Customized - ({{checked2}})</h3>
<p-toggleButton [(ngModel)]="checked2" onLabel="I confirm" offLabel="I reject" onIcon="fa-check-square" offIcon="fa-square" [style]="{'width':'150px'}"></p-toggleButton>

<h2>inputseitch</h2>
<h3 class="first"> Basic - {{checked3}}</h3>
<p-inputSwitch offLabel="No" [(ngModel)]="checked3"></p-inputSwitch>
<h3>Labels - <span> {{checked4}}</span></h3>
<p-inputSwitch onLabel="Yes"  [(ngModel)]="checked4"></p-inputSwitch>

<h2>radiobutton</h2>
<h3 class="first">Basic</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1"></p-radioButton></div>
</div>
Selected Value = {{val1||'none'}}
<h3>Preselection</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group2" value="Option 1" label="Option 1" [(ngModel)]="val2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group2" value="Option 2" label="Option 2" [(ngModel)]="val2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group2" value="Option 3" label="Option 3" [(ngModel)]="val2"></p-radioButton></div>
</div>
Selected Value = {{val2||'none'}}

<h2>password</h2>
<h3 class="first">Password</h3>
<input pPassword type="password"/>

<h2>tristatecheckbox</h2>
<h3 class="first">Value: {{value}}</h3>
<p-triStateCheckbox [(ngModel)]="value"></p-triStateCheckbox>

<h2>rating</h2>
<h3 class="first">Basic {{val1}}</h3>
<p-rating [(ngModel)]="val1"></p-rating>
<h3>Callback {{val2}}</h3>
<p-rating [(ngModel)]="val2" (onRate)="handleRate($event)" ></p-rating> <span *ngIf="msg" style="margin-left:10px">{{msg}}</span>
<h3>No Cancel {{val3}}</h3>
<p-rating [(ngModel)]="val3" [cancel]="false"></p-rating>
<h3>ReadOnly</h3>
<p-rating [ngModel]="5" readonly="true" stars="10" [cancel]="false"></p-rating>
<h3>Disabled</h3>
<p-rating [ngModel]="val4" disabled="true" stars="10"></p-rating>
